<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="renderer" content="webkit" />
		<!-- 让部分国产浏览器默认采用高速模式渲染页面 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>长虹[联合运营平台后台管理系统]</title>
		<!-- 全局CSS 开始-->
		<link href="../css/global/bootstrap.min.css" rel="stylesheet" />
		<link href="../css/global/font-awesome.min.css" rel="stylesheet" />
		<link href="../css/global/simple-line-icons.css" rel="stylesheet" />
		<link href="../css/global/animate.css" rel="stylesheet" />
		<link href="../css/global/style.css" rel="stylesheet" />
		<link href="../js/plugins/pace/pace.css" rel="stylesheet" />
		<!-- 全局CSS 结束-->
		<!-- 页面CSS 开始-->
		<!-- 页面CSS 结束-->
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="../js/bootstrap/html5shiv.min.js"></script>
		<script src="../js/bootstrap/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="wrapper wrapper-content animated fadeInUp">
			<div class="row page-heading">
				<h4><i class="fa fa-flask"></i>  UI组件 / 徽章、标签、进度条</h4>
			</div>
			<div class="row">
				<div class="col-md-6">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>徽章标记  <small>Badges</small></h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<p>
							添加 <code>.badge</code>class ， 改变颜色可以添加 <code>.badge-primary</code>等class
							</p>
							<p><span class="badge">Plain</span></p>
							<p><span class="badge badge-primary">Primary</span></p>
							<p><span class="badge badge-info">Information</span></p>
							<p><span class="badge badge-success">Success</span></p>
							<p><span class="badge badge-warning">Warning</span></p>
							<p><span class="badge badge-danger">Danger</span></p>
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>标签<small>Labels</small></h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<p>
							添加 <code>.label</code>class， 改变颜色添加<code>.label-primary</code>等class
							</p>
							<p><span class="label">Plain</span></p>
							<p><span class="label label-primary">Primary</span></p>
							<p><span class="label label-info">Information</span></p>
							<p><span class="label label-success">Success</span></p>
							<p><span class="label label-warning">Warning</span></p>
							<p><span class="label label-danger">Danger</span></p>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>进度条</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<h5>简单进度条</h5>
							<div class="progress">
								<div style="width: 35%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" role="progressbar" class="progress-bar progress-bar-success">
									<span class="sr-only">35% Complete (success)</span>
								</div>
							</div>
							
							<div class="progress progress-bar-default">
								<div style="width: 43%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="43" role="progressbar" class="progress-bar">
									<span class="sr-only">43% Complete (success)</span>
								</div>
							</div>
							
							<h5>条纹进度条</h5>
							
							<div class="progress progress-striped">
								<div style="width: 50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar" class="progress-bar progress-bar-warning">
									<span class="sr-only">40% Complete (success)</span>
								</div>
							</div>
							
							<h5>active进度条</h5>
							
							<div class="progress progress-striped active">
								<div style="width: 75%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-danger">
									<span class="sr-only">40% Complete (success)</span>
								</div>
							</div>
							
							<h5>组合进度条</h5>
							
							<div class="progress progress-striped active">
								<div style="width: 30%" class="progress-bar progress-bar-success">
									<span class="sr-only">30% Complete (success)</span>
								</div>
								<div style="width: 20%" class="progress-bar progress-bar-warning">
									<span class="sr-only">15% Complete (warning)</span>
								</div>
								<div style="width: 40%" class="progress-bar progress-bar-danger">
									<span class="sr-only">40% Complete (danger)</span>
								</div>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 全局js 开始-->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap/bootstrap.min.js"></script>
		<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
		<script src="../js/custom/custom.js"></script>
		<script src="../js/plugins/pace/pace.min.js"></script>
		<!-- 全局js 结束-->
		<!-- 页面js 开始-->
		<!-- iframeResizer -->
		<!-- <script src="../js/plugins/iframeResizer/iframeResizer.contentWindow.min.js"></script> -->
		<!-- 页面js 结束-->
	</body>
</html>